<template>
    <div class="errorpage" ref="bgstar" id="bgstar">
        <div class="down" @click="gotowhere('app')"> 剩余 {{num}} S </div>
        <div class="dao" v-if="false" @click="gotowhere('app')">
            <van-circle
                v-model="currentRate"
                :rate="100"
                :color="gradientColor"
                :text="text"
                :stroke-width="50"
                :size="70"
                :speed="20"
            />
        </div>
        <img :src="require('@/assets/images/503.png')" alt="" class="myimg">   
        <span class="spandot" v-for="(l,i) in spanNum" :key=i :style="l" > </span>
    </div>
</template>

<script>
import pic from '@/assets/images/503.png'
var timer = null 
export default {
    name:"badservice" ,  // 组件别名
    data(){
        return {
            pic:pic,
            spanNum:[],
            currentRate:0,
            num:5,
            gradientColor: {
                '0%': '#3fecff',
                '100%': '#6149f6',
            },
        }
    },
    computed:{
        text(){
            return this.currentRate + "%"
        }
    },
    watch:{
        currentRate(v){
            if(v==100){
                this.gotowhere('app')
            }
        }
    },
    methods:{
        timerDown(){
            timer = setInterval(()=>{
                if(this.num>0){
                    this.num--;
                }else{
                    clearInterval(timer)
                    timer = null;
                    // 跳转 页面   
                    // this.$router.push({name:'app'})
                    this.gotowhere('app')
                }
            },1000)
        },
        spanListInit(){
            var width = document.getElementById("bgstar").clientWidth;
            var height = this.$refs.bgstar.clientHeight;
            console.log(width,height)
            for(var i=0;i<520;i++){
                var left = Math.random() * width ;
                var top = Math.random() * height   // 位置
                
                var scaler = Math.random()    // 大小
                var rate = 2.5 * Math.random(); // 频率
                var r = Math.random() * 255;
                var g = Math.random() * 255;
                var b = Math.random() * 255;
                var opacity = Math.random()
                this.spanNum.push({
                    left:left+'px',
                    top:top+'px',
                    background:`rgba(${r},${g},${b},${opacity})`,
                    transform:`scale(${scaler})`,
                    animationDelay:rate + 's'
                })
            }
        }
    },
    // 路由销毁的时候 终止计数器 
    destroyed(){
        clearInterval(timer)
        timer = null;
        this.currentRate = 0;
    },
    mounted(){
        this.spanListInit()
        this.timerDown()
    }
}
</script>


<style lang="scss" scoped >
// scope 独立的css作用域 
.errorpage{
  width:100%;
  height:100%;
  background: #000;
  position: relative;
  padding:0 !important;
  .down{
    position:absolute;
    left:20px;
    top:20px;
    border:1px solid #fff;
    color:#fff;
    width:70px;
    height:30px;
    border-radius:10px;
    text-align:center;
    line-height:30px;
  }
  .dao{
    position: absolute;
    top:20px;
    right:20px;
    ::v-deep .van-circle__text{
        color:#fff !important;
    }
  }
  .myimg{
    width:270px;
    height:270px;
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    z-index:10;
  }
  .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>